body {
  --mainColor: transparent;
  --themeColor: transparent;
  --titleColor: transparent;
  --textColor: transparent;
  --hoverColor: #f2f6ff;
  --tableColor: #f1f4fb;
  --tableHColor: transparent;
  --sibarColor2: transparent;
  --sibarColor3: transparent;
  --sibarColor56: transparent;
  --sibarColor561: transparent;
  --asideBox: transparent;
  --menuSpread: transparent;
  --menuSpreadH: transparent;
  --borderActive: transparent;
}

body.defaultTheme {
  --mainColor: #4d6ee8;
  --themeColor: #5068d1;
  --titleColor: #6881eb;
  --textColor: #4b5071;
  --hoverColor: #f2f6ff;
  --tableColor: #f1f4fb;
  --tableHColor: #f5f7fa;
  --sibarColor2: rgba(54, 71, 145, 0.2);
  --sibarColor3: rgba(54, 71, 145, 0.3);
  --sibarColor56: rgba(54, 71, 145, 0.56);
  --sibarColor561: rgba(42, 58, 129, 0.56);
  --asideBox: #364791;
  --menuSpread: #8798e2;
  --menuSpreadH: rgba(24, 29, 82, 0.2);
  --borderActive: #85b9ff;
}
.defaultTheme .user::before {
  background: url("../../images/header/user.png") center no-repeat;
}
.defaultTheme .system::before {
  background: url("../../images/header/system.png") center no-repeat;
}
.defaultTheme .exit::before {
  background: url("../../images/header/exit.png") center no-repeat;
}
.defaultTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg.png") repeat center
    left/ auto 100%;
}

body.grayTheme {
  --mainColor: #3c6995;
  --themeColor: #2e5780;
  --titleColor: #3c6995;
  --textColor: #4b5071;
  --hoverColor: #f2f9ff;
  --tableColor: #f0f5ff;
  --tableHColor: #f6f8fa;
  --sibarColor2: rgba(105, 141, 177, 0.2);
  --sibarColor3: rgba(105, 141, 177, 0.3);
  --sibarColor56: rgba(105, 141, 177, 0.56);
  --sibarColor561: rgba(105, 141, 177, 0.56);
  --asideBox: #698db1;
  --menuSpread: #c1cee0;
  --menuSpreadH: rgba(60, 105, 149, 0.2);
  --borderActive: #3c6995;
}
.grayTheme .user::before {
  background: url("../../images/header/gray/user.png") center no-repeat;
}
.grayTheme .system::before {
  background: url("../../images/header/gray/system.png") center no-repeat;
}
.grayTheme .exit::before {
  background: url("../../images/header/gray/exit.png") center no-repeat;
}
.grayTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_gray.png") repeat
    center left/ auto 100%;
}

body.greenTheme {
  --mainColor: #18ab9a;
  --themeColor: #1c998a;
  --titleColor: #18ab9a;
  --textColor: #4b5071;
  --hoverColor: #f0f8f7;
  --tableColor: #f0f1f1;
  --tableHColor: #fafafa;
  --sibarColor2: rgba(197, 234, 230, 0.1);
  --sibarColor3: rgba(197, 234, 230, 0.2);
  --sibarColor56: rgba(197, 234, 230, 0.2);
  --sibarColor561: rgba(197, 234, 230, 0.56);
  --asideBox: #94d4cd;
  --menuSpread: #c5eae6;
  --menuSpreadH: rgba(52, 158, 146, 0.2);
  --borderActive: #c5eae6;
}
.greenTheme .user::before {
  background: url("../../images/header/green/user.png") center no-repeat;
}
.greenTheme .system::before {
  background: url("../../images/header/green/system.png") center no-repeat;
}
.greenTheme .exit::before {
  background: url("../../images/header/green/exit.png") center no-repeat;
}
.greenTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_green.png") repeat
    center left/ auto 100%;
}

body.orangeTheme {
  --mainColor: #ff9b57;
  --themeColor: #ff9249;
  --titleColor: #ff9b57;
  --textColor: #4b5071;
  --hoverColor: #fff9f5;
  --tableColor: #fffaf7;
  --tableHColor: #fffcf8;
  --sibarColor2: rgba(253, 240, 229, 0.2);
  --sibarColor3: rgba(253, 240, 229, 0.3);
  --sibarColor56: rgba(253, 240, 229, 0.56);
  --sibarColor561: rgba(253, 240, 229, 1);
  --asideBox: #fdf0e5;
  --menuSpread: #fbc7a2;
  --menuSpreadH: rgba(138, 92, 59, 0.2);
  --borderActive: linear-gradient(
    0deg,
    rgba(255, 152, 1, 1),
    rgba(255, 187, 2, 1)
  );
}
.orangeTheme .user::before {
  background: url("../../images/header/orange/user.png") center no-repeat;
}
.orangeTheme .system::before {
  background: url("../../images/header/orange/system.png") center no-repeat;
}
.orangeTheme .exit::before {
  background: url("../../images/header/orange/exit.png") center no-repeat;
}
.orangeTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_orange.png") repeat
    center left/ auto 100%;
}
.orangeTheme .menus .menuList {
  color: #554f73 !important;
}
.orangeTheme
  .menus
  .menuList.active
  > .menuBox
  > .menuMame
  > .el-icon-arrow-down {
  color: #ff9f01 !important;
}
.orangeTheme .logo + span {
  color: transparent;
  background: linear-gradient(
    0deg,
    rgba(245, 167, 35, 1) 0%,
    rgba(237, 99, 31, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.redTheme {
  --mainColor: #c96767;
  --themeColor: #cc4949;
  --titleColor: #a63939;
  --textColor: #4b5071;
  --hoverColor: #fff3f3;
  --tableColor: #fbf1f1;
  --tableHColor: #fff9f9;
  --sibarColor2: rgba(145, 54, 54, 0.2);
  --sibarColor3: rgba(145, 54, 54, 0.3);
  --sibarColor56: rgba(145, 54, 54, 0.56);
  --sibarColor561: rgba(145, 54, 54, 0.56);
  --asideBox: #913636;
  --menuSpread: #e28787;
  --menuSpreadH: rgba(0, 0, 0, 0.2);
  --borderActive: #ff8585;
}
.redTheme .user::before {
  background: url("../../images/header/red/user.png") center no-repeat;
}
.redTheme .system::before {
  background: url("../../images/header/red/system.png") center no-repeat;
}
.redTheme .exit::before {
  background: url("../../images/header/red/exit.png") center no-repeat;
}
.redTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_red.png") repeat
    center left/ auto 100%;
}

body.blackTheme {
  --mainColor: #2183d8;
  --themeColor: #2273b9;
  --titleColor: #2183d8;
  --textColor: #4b5071;
  --hoverColor: #e8f1f8;
  --tableColor: #f0f6fb;
  --tableHColor: #f9fbff;
  --sibarColor2: rgba(53, 52, 65, 0.2);
  --sibarColor3: rgba(53, 52, 65, 0.3);
  --sibarColor56: rgba(53, 52, 65, 0.56);
  --sibarColor561: rgba(53, 52, 65, 0.56);
  --asideBox: #353441;
  --menuSpread: #353441;
  --menuSpreadH: rgba(53, 52, 65, 0.2);
  --borderActive: #ffffff;
}
.blackTheme .user::before {
  background: url("../../images/header/black/user.png") center no-repeat;
}
.blackTheme .system::before {
  background: url("../../images/header/black/system.png") center no-repeat;
}
.blackTheme .exit::before {
  background: url("../../images/header/black/exit.png") center no-repeat;
}
.blackTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_black.png") repeat
    center left/ auto 100%;
}

body.purpleTheme {
  --mainColor: #4b5071;
  --themeColor: #40445d;
  --titleColor: #4b5071;
  --textColor: #4b5071;
  --hoverColor: #f1f2f6;
  --tableColor: #f3f4fd;
  --tableHColor: #f6f7fd;
  --sibarColor2: rgba(53, 52, 65, 0.1);
  --sibarColor3: rgba(53, 52, 65, 0.2);
  --sibarColor56: rgba(53, 52, 65, 0.5);
  --sibarColor561: rgba(53, 52, 65, 0.5);
  --asideBox: rgba(53, 52, 65, 0.7);
  --menuSpread: #353441;
  --menuSpreadH: rgba(53, 52, 65, 0.2);
  --borderActive: #ffffff;
}
.purpleTheme .user::before {
  background: url("../../images/header/purple/user.png") center no-repeat;
}
.purpleTheme .system::before {
  background: url("../../images/header/purple/system.png") center no-repeat;
}
.purpleTheme .exit::before {
  background: url("../../images/header/purple/exit.png") center no-repeat;
}
.purpleTheme .asideBox {
  background: var(--asideBox) url("../../images/siderbar/bg_purple.png") repeat
    center left/ auto 100%;
}
